import React, { Component } from 'react';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// import './index.css';
import baerer from '../static/img/name2.jpg'
export default class Panormatic extends Component {

    constructor() {
        super();
        this.renderer = null;
        this.camera = null;
        this.scene = null;
        this.container = null;
        this.controls = null;

    }

    componentDidMount() {
        const container = document.getElementById('panoramic-canvas-container');
        const canvas = document.getElementById('panoramic-canvas');
        const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });

        renderer.setClearColor(0xffffff);   // b2e0df 绿豆沙色
        renderer.setPixelRatio(window.devicePixelRatio);
        const height = container.clientHeight;
        const width = container.clientWidth;
        renderer.setSize(width, height);

        const camera = new THREE.PerspectiveCamera(60, width / height, 1, 30000);
        camera.position.set(0, 0, 1);
        camera.center = new THREE.Vector3(0, 0, 0);

        const scene = new THREE.Scene();

        const geometry = new THREE.SphereBufferGeometry(500, 32, 32);
        geometry.scale(-1, 1, 1);   // 将纹理反贴
        const material = new THREE.MeshBasicMaterial({
            map: new THREE.TextureLoader().load(baerer)
        });
        const mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        const controls = new OrbitControls(camera, renderer.domElement);
        // controls.enableZoom = false;
        controls.enablePan = false;
        controls.maxDistance = 1000;

        this.renderer = renderer;
        this.camera = camera;
        this.scene = scene;
        this.container = container;
        this.controls = controls;
        this.mesh = mesh;
        window.addEventListener('resize', this.onWindowResize)
        this.renderLoop();
    }
    onWindowResize = () => {
        this.camera.aspect = window.innerWidth / window.innerHeight
        this.camera.updateProjectionMatrix()
        this.renderer.setSize(window.innerWidth, window.innerHeight)
    }
    renderLoop = () => {
        this.renderer.render(this.scene, this.camera);
        // this.mesh.rotateY(0.0005)
        this.mesh.rotation.y += 0.0005
        requestAnimationFrame(this.renderLoop);
    };
    clok() {
        console.log(1)
    }
    render() {

        return (

            <>
                <div className="dong" id='panoramic-canvas-container'>
                    <canvas id='panoramic-canvas' style={{ height: '40em' }}  ></canvas>
                </div>
                <button onClick={() => this.clok()}>切换</button>
            </>

        );
    }
}